I have 3 work shifts and I need to create a script that allows the user (employee) to know if he's given night shift or not. For this I need:

1.) Check if the employee has to work between 10 PM and 7 AM.

1.1) Inform the employee how many hours (and minutes) has to work and what hours are included in that period.

2.) Check if the employee works between 7 - 11 hours per day.

2.1) Check if any of 2.) falls between midnight and 5 AM.

2.2) Same as 1.1)

Can anyone help me please?

<div id="shifts">

<input type="time" id="shift_1_start">
<input type="time" id="shift_1_end">

<p id="shift_1_alert" style="display: none;">
  Shift 1 has 'x' hours and 'y' minutes in total.
  <br /><br />
  Shift 1 has 'x' hours and 'y' minutes between 12 AM and 5 AM.
  <br /><br />
  Shift 1 has 'x' hours and 'y' minutes between 10 PM and 7 AM.
</p>

<input type="time" id="shift_2_start">
<input type="time" id="shift_2_end">

<p id="shift_2_alert" style="display: none;">
  Shift 2 has 'x' hours and 'y' minutes in total.
  <br /><br />
  Shift 2 has 'x' hours and 'y' minutes between 12 AM and 5 AM.
  <br /><br />
  Shift 2 has 'x' hours and 'y' minutes between 10 PM and 7 AM.
</p>

<input type="time" id="shift_3_start">
<input type="time" id="shift_3_end">

<p id="shift_3_alert" style="display: none;">
  Shift 3 has 'x' hours and 'y' minutes in total.
  <br /><br />
  Shift 3 has 'x' hours and 'y' minutes between 12 AM and 5 AM.
  <br /><br />
  Shift 3 has 'x' hours and 'y' minutes between 10 PM and 7 AM.
</p>

</div>

<p id="shifts_alert" style="display: none;">
  Shifts have 'x' hours and 'y' minutes in total.
  <br /><br />
  Shifts have 'x' hours and 'y' minutes between 12 AM and 5 AM.
  <br /><br />
  Shifts have 'x' hours and 'y' minutes between 10 PM and 7 AM.
</p>